<template>
  <div class="search-history">
    <van-cell-group>
      <van-cell title="历史记录">
        <div v-if="isDeleteShow">
          <span @click="deleteAll">全部删除</span>
          &nbsp;&nbsp;
          <span @click="isDeleteShow = false">完成</span>
        </div>
        <van-icon v-else name="delete" @click="isDeleteShow = true"/>
      </van-cell>
      <van-cell
        :title="item"
        v-for="(item, index) in historyList"
        :key="index"
        @click="deleteItem(item, index)"
      >
        <van-icon
          name="close"
          v-show="isDeleteShow"
        >
        </van-icon>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: 'search-history',
  props: ['historyList'],
  data() {
    return {
      isDeleteShow: false
    }
  },
  methods: {
    deleteItem (item, index) {
      if( this.isDeleteShow ) {
        this.historyList.splice(index, 1)
      } else {
        this.$emit('search', item)
      }
    },
    deleteAll () {
      this.$emit('delete-all')
    }
  }
}
</script>

<style scoped lang="less"></style>
